%section
  %a.scroll-target{name: 'colors'}
  %h3.color-black Colors

  .panel.panel--padded
    %h4 Neutral colors
    .styleguide-colors
      .styleguide-color-block
        %span.styleguide-color.bg-color-black
        %label.input-block__label
          Black
      .styleguide-color-block
        %span.styleguide-color.bg-color-white
        %label.input-block__label
          White
      .styleguide-color-block
        %span.styleguide-color.bg-color-grey
        %label.input-block__label
          Grey
      .spacer

    %h4 Base colors
    .styleguide-colors
      .styleguide-color-block
        .styleguide-color.bg-color-primary
        %label.input-block__label
          Primary
      .styleguide-color-block
        .styleguide-color.bg-color-secondary
        %label.input-block__label
          Secondary
      .styleguide-color-block
        .styleguide-color.bg-color-accent
        %label.input-block__label
          Accent
      .spacer

    %h4 Notification colors
    .styleguide-colors
      .styleguide-color-block
        .styleguide-color.bg-color-required
        %label.input-block__label
          Required
      .styleguide-color-block
        .styleguide-color.bg-color-error
        %label.input-block__label
          Error
      .styleguide-color-block
        .styleguide-color.bg-color-success
        %label.input-block__label
          Success
      .styleguide-color-block
        .styleguide-color.bg-color-warning
        %label.input-block__label
          Warning
      .spacer

= render 'tenon/styleguides/colors/variables'
= render 'tenon/styleguides/colors/helpers'
